<template>
  <div class="app-container">
    <div v-if="storeOne" class="store-details">
      <h1>Store Details</h1>
      <div class="detail-item">
        <span class="detail-label">ID:</span>
        <span class="detail-value">{{ storeOne.id }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">负责人:</span>
        <span class="detail-value">{{ storeOne.username }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">联系手机号:</span>
        <span class="detail-value">{{ storeOne.phone }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">商铺名称:</span>
        <span class="detail-value">{{ storeOne.storeName }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">法人:</span>
        <span class="detail-value">{{ storeOne.corporate }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">提交时间:</span>
        <span class="detail-value">{{ storeOne.latestSubmissionTime | formatDate }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">类型:</span>
        <span class="detail-value">{{ storeOne.type }}</span>
      </div>
      <div class="detail-item">
        <span class="detail-label">地址:</span>
        <span class="detail-value">{{ storeOne.addressName }}</span>
      </div>

      <div class="detail-item">
        <span class="detail-label">审批状态:</span>
        <span class="detail-value">{{ storeOne.stateName }}</span>
      </div>

      <div class="detail-item">
        <span class="detail-label">营业执照有效期:</span>
        <span class="detail-value">{{ storeOne.validity | formatDate }}</span>
      </div>
       <div class="detail-item">
        <span class="detail-label">Images:</span>
        <div class="images-container">
          <img v-for="(image, index) in imagesArray" :key="index" :src="image" alt="Store Image" class="store-image"/>
        </div>
      </div>

      <!-- 提交表单 -->
      <div class="submit-form">
        <h2>提交审批</h2>
        <form @submit.prevent="handleSubmit">
          <div class="form-group">
            <label for="comment">审批人：</label>
            <textarea id="comment" v-model="reviewer.name" required disabled></textarea>
          </div>
          <div class="form-group">
            <label for="comment">审批意见：</label>
            <textarea id="comment" v-model="store.remark" required></textarea>
          </div>
          <div class="form-group">
            <label for="status">审批状态：</label>
            <select id="status" v-model="store.stateId" required>
              <option value="1">批准</option>
              <option value="2">拒绝</option>
              <option value="0">待定</option>
            </select>
          </div>
          <button type="submit">提交</button>
        </form>
      </div>

      

    </div>
  </div>
</template>
  
  <script>
  import {selectOne,getReviewer,submitStore } from '@/api/store';


  
  export default {
    data() {
      return {
       storeOne:'',
       reviewer:'',
       store:'',
      //  remark: '', // 审批意见
      //  state: '', // 审批状态
      }
    },
    computed: {
    imagesArray() {
      // 将图片路径字符串分割成数组
      return this.storeOne.images.split(',');
    }
  },
    methods: {
      selectOne0(id){
        selectOne({id:id}).then((res)=>{
          this.storeOne=res.data
          this.store=this.storeOne
          console.log(this.selectOne.username)
        })
      },
      getReviewer0(){
        getReviewer().then((res)=>{
          this.reviewer=res.data
        })
      },
      handleSubmit() {
      // 在这里处理表单提交逻辑
      console.log('提交审批：', this.store.remark);
      this.store.reviewerId=this.reviewer.id
      // 可以调用API提交数据等
      submitStore(this.store).then((res)=>{
        if(res.code==200){
          this.$router.push({
        name: 'storeRoute', // 替换为目标页面的路由名称

      });
        }
      })
    },
      
    },
    mounted() {
      const id = this.$route.params.id;
      this.selectOne0(id)
      this.getReviewer0()
    }
  };
  </script>
  
  <style scoped>
  /* ...其他样式 */

.images-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 图片之间的间隔 */
}

.store-image {
  width: 100px; /* 或者您想要的尺寸 */
  height: auto;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.app-container {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-out;
}

.store-details {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.detail-item {
  display: flex;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.detail-label {
  font-weight: bold;
  min-width: 200px;
  color: #333;
}

.detail-value {
  flex: 1;
  color: #666;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 提交表单样式 */
.submit-form {
  position: fixed;
  right: 20px;
  top: 20%; /* 根据需要调整位置 */
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px; /* 根据需要调整宽度 */
  z-index: 1000; /* 确保表单在最上层 */
}

.submit-form h2 {
  margin-top: 0;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button[type="submit"] {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}
</style>